<template>
	<div class="menu_left">
		<div class="myheader_left">
			<div style="display: flex; align-items: center; height: 100%;width:100%;justify-content: center;">
				XXX系统
			</div>
		</div>
		<el-menu :default-active="$route.name" class="el-menu-vertical-demo" background-color="#001528"
			text-color="#fff" active-text-color="#4f46e5">
			<!-- 遍历一级菜单 -->
			<template v-for="route in menulist" :key="route.name">
				<!-- 如果没有子菜单，直接渲染el-menu-item -->
				<el-menu-item class="yijimenu" v-if="!route.children || !route.children.length" :index="route.path"
					@click="handleMenuItemClick(route)">
					<component :is="getIconComponentByName(route.meta?.icon)" style="width: 20px;margin-right: 5px;" />
					{{ route.meta?.title }}
				</el-menu-item>

				<!-- 如果有子菜单，渲染一个el-sub-menu -->
				<el-sub-menu v-else :index="route.path">
					<template #title>
						<component :is="getIconComponentByName(route.meta?.icon)" color="#A5ACB3"
							style="width: 20px;margin-right: 5px;" />
						<span>{{ route.meta?.title }}</span>
					</template>
					<!-- 遍历渲染出所有子菜单 -->
					<template v-for="child in route.children" :key="child.name">
						<el-menu-item v-if="child.meta" :index="child.path" @click="handleMenuItemClick(child)">
							{{ child.meta?.title }}
						</el-menu-item>
					</template>
				</el-sub-menu>
			</template>
		</el-menu>
	</div>
</template>

<script lang="ts" setup>
	import { useRoute, useRouter } from "vue-router";
	import homeChildrenRoutes from "../router/data.js";
	import { onMounted } from "vue";
	import * as Icons from '@element-plus/icons-vue';

	const menulist = homeChildrenRoutes

	onMounted(() => {
		console.log(onMounted);
	});

	const router = useRouter();
	const route = useRoute();

	const handleMenuItemClick = (route) => {
		// 如果这个路由项是一个子路由，我们需要构建完整的路径
		if (route.meta && route.meta.parentPath) {
			router.push({ path: route.meta.parentPath + "/" + route.path });
		} else {
			console.log(route.path);
			// 否则，它就是一个顶级路由，我们可以直接使用它的路径
			router.push({ path: "/" + route.path });
		}
	};

	const getIconComponentByName = (iconName) => {
		// 将字符串“Tickets”转换为组件 `Icons.Tickets`
		return Icons[iconName];
	};
</script>

<style lang="scss" scoped>
	.menu_left {
		width: 200px;
		height: 100%;
		background-color: #ffffff;
		z-index: 6;
		box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);
	}

	.myheader_left {
		height: 60px;
		width: 100%;
		display: flex;
		align-items: center;
		padding: 5px 20px;
		box-sizing: border-box;
		border-bottom: 1px solid #fff;
	}

	.el-menu-vertical-demo {
		width: 200px !important;
		height: calc(100% - 60px);
		overflow-y: auto;
		transition: all 0.5s;
		background-color: #ffffff;
	}

	.el-menu-vertical-demo::-webkit-scrollbar {
		width: 0 !important;
	}

	.el-menu-vertical-demo {
		overflow: -moz-scrollbars-none;
		border: none;
	}

	.miniWitdh {
		width: 70px !important;
		transition: all 0.5s;
	}

	:deep(.el-menu-item-group__title) {
		display: none;
	}

	:deep(.el-submenu__title i) {
		color: rgb(165, 172, 179);
	}

	:deep(.el-submenu__title) {
		color: rgb(165, 172, 179);
	}

	:deep(.el-menu-item) {
		color: black;
	}

	:deep(.el-sub-menu) {
		.el-menu-item {
			position: relative;
			// background-color: #161d31 !important;
			padding-left: 55px !important;
			color: #999999 !important;

			&:hover {
				background-color: #f6f6f6 !important;

				&::after {
					opacity: 1;
				}
			}

			&:after {
				content: "";
				position: absolute;
				right: 0;
				width: 5px;
				background-color: #4f46e5 !important;
				height: 100%;
				opacity: 0;
			}
		}

		.is-active {
			position: relative;
			background-color: rgba(36, 153, 239, 0.06) !important;

			&::after {
				opacity: 1;
			}
		}
	}

	:deep(.el-submenu__icon-arrow) {
		color: rgb(165, 172, 179) !important;
	}

	.clearboth:after {
		width: 0 !important;
	}

	:deep(.is-active .clearcolor .el-submenu__title) {
		color: #fff;
	}

	:deep(.is-active .is-active .el-submenu__title) {
		color: #fff;
	}

	:deep(.el-sub-menu .is-active) {
		background-color: #f3f9fd;
		color: #4d46dc !important;
	}

	:deep(.yijimenu.is-active) {
		background-color: #f3f9fd;
		color: #4d46dc !important;
		position: relative;

		.yijimenu1 {
			position: absolute;
			top: 0;
			right: 0;
			height: 100%;
			width: 5px;
			background-color: #4f46e5;
		}
	}

	:deep(.el-sub-menu__title) {
		&:hover{
			background-color: #CCCCCC !important;
		}
		color: #625F6E;
		span{
			font-size: 14px !important;
		}		
	}

	:deep(.myheader_left) {
		padding: 5px 15px;
	}

	.leftm1 {
		display: flex;
		width: 100%;
		//height: 100%;
	}

	.leftm2 {
		width: 30%;
		height: 60px;
		justify-content: center;
		display: flex;
		flex-direction: column;
	}

	.leftm3 {
		width: 40px;
		height: 40px;
	}

	.leftm4 {
		font-size: 15px;
		margin-top: 20rpx;
		border-left: 1px solid #dedede;
		padding-left: 10px;
	}

	.leftm5 {
		width: 70%;
		height: 60px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	:deep(.el-sub-menu>ul) {
		background-color: white !important;

		.is-active {
			position: relative;

			.yijimenu1 {
				position: absolute;
				top: 0;
				right: 0;
				height: 100%;
				width: 5px;
				background-color: #4f46e5;
			}
		}
	}

	.yuandian1 {
		width: 25px;
		height: 25px;
		background-color: red;
		border-radius: 100%;
		margin-left: 15px;
		color: white;
		text-align: center;
		line-height: 25px;
	}
</style>